

<template>
  <a-row class="page" :gutter="[18,0]">
    <a-col :span="3" class="left">
      <a-input v-model:value="deptWord" style="margin-bottom: 8px" placeholder="请输入搜索关键字">
        <template #prefix>
          <SearchOutlined />
        </template>
      </a-input>
      <a-tree
          block-node
          :fieldNames="{children:'children', title:'name', key:'id' }"
          @select="selectDept"
          :tree-data="treeDept"
      />
    </a-col>
    <a-col :span="21" class="right">
      <a-form layout="inline" :model="query" v-if="searchBox">
        <a-form-item label="搜索词">
          <a-input v-model:value="query.keyWord" placeholder="请输入搜索关键字" />
        </a-form-item>
        <a-form-item label="状态" name="region">
          <a-select v-model:value="query.status" placeholder="请选择用户状态">
            <a-select-option :value="1">禁止</a-select-option>
            <a-select-option :value="0">正常</a-select-option>
          </a-select>
        </a-form-item>
        <a-space>
          <a-button type="primary" @click="list">查询</a-button>
          <a-button @click="resetQuery">重置</a-button>
        </a-space>
      </a-form>
      <div class="functionBox">
        <a-space class="left">
          <a-button type="dashed" :icon="h(PlusOutlined)" @click="operator(0)">新增</a-button>
        </a-space>
        <a-space class="right">
          <a-button size="small" shape="circle" :icon="h(ReloadOutlined)" @click="list()" />
          <a-button size="small" shape="circle" :icon="h(SearchOutlined)" @click="() => searchBox = !searchBox" />
        </a-space>
      </div>
      <div ref="basePoint" :style="`height: ${ windowHeight - elementToTopHight - 7 }px !important;`">
        <a-table
            :columns="columns"
            :data-source="tableData"
            :row-key="( record : User )=> record.id"
            :pagination="false"
            @resizeColumn="handleResizeColumn"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'deptName'">
              <span>{{ record.dept ? record.dept.name : '未设置部门' }}</span>
            </template>
            <template v-if="column.dataIndex === 'postName'">
              <span>{{ record.post ? record.post.name : '未设置岗位' }}</span>
            </template>
            <template v-if="column.dataIndex === 'joinDate'">
              <span v-if="record.joinDate">{{ dayjs(record.joinDate).format('YYYY-MM-DD') }}</span>
            </template>
            <template v-if="column.dataIndex === 'contractExpiryDate'">
              <span v-if="record.contractExpiryDate">{{ dayjs(record.contractExpiryDate).format('YYYY-MM-DD') }}</span>
            </template>
            <template v-if="column.dataIndex === 'isActive'">
              <a-tag color="green" v-if="record.isActive == 0">正常</a-tag>
              <a-tag color="red" v-if="record.isActive == 1">禁止</a-tag>
            </template>
            <template v-if="column.dataIndex === 'action'">
                <a-button type="link" size="small" @click="() => workerInfoEvent(record)">详情</a-button>
                <a-button type="link" size="small" @click="() => operator(1,record)">编辑</a-button>
                <a-popconfirm title="是否要真的批量删除这个员工嘛!" @confirm="remove([ record.id ])">
                  <template #icon><question-circle-outlined style="color: red" /></template>
                  <a-button type="link">删除</a-button>
                </a-popconfirm>
            </template>
          </template>
        </a-table>
        <div class="pagination">
          <a-pagination
              size="small"
              :disabled="total == 0"
              :total="total"
              show-size-changer
              @change="pageChange"
              show-quick-jumper />
        </div>
      </div>
    </a-col>

    <a-modal
        :title="operatorStore.cmd == 0 ? '添加员工' : '编辑员工'"
        v-model:open="operatorStore.open"
        width="760px"
        @ok="submit"
        @cancel="cancel"
    >
      <a-form
          style="margin: 12px 0"
          :model="worker"
          labelAlign="right"
          ref="formRef"
          :rules="rules"
          :label-col="{ style: { width: '80px' } }"
      >
        <a-row :gutter="[16,16]">
          <a-col :span="12">
            <a-form-item label="姓名" name="realName">
              <a-input v-model:value="worker.realName" placeholder="请输入真实姓名" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="身份证" name="idCard">
              <a-input v-model:value="worker.idCard" placeholder="请输入身份证号码" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[16,16]">
          <a-col :span="12">
            <a-form-item label="部门" name="departmentId">
              <a-tree-select
                  checkable
                  v-model:value="worker.departmentId"
                  defaultValue='请选择部门'
                  :allowClear="true"
                  showSearch
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  placeholder="选择部门"
                  tree-default-expand-all
                  :fieldNames="{ children:'children', label:'name', value: 'id' }"
                  :tree-data="treeDept"
                  tree-node-filter-prop="name"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="岗位" name="positionId">
              <a-select
                  v-model:value="worker.positionId"
                  show-search
                  placeholder="请选择岗位"
                  :field-names="{ label: 'name', value: 'id' }"
                  :options="post"
                  :listHeight="60"
                  :filter-option="filterPost"
              >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[16,16]">
          <a-col :span="8">
            <a-form-item label="性别" name="sex">
              <a-radio-group v-model:value="worker.sex">
                <a-radio :value="0">男</a-radio>
                <a-radio :value="1">女</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="学历" name="education">
              <a-input v-model:value="worker.education" placeholder="请输入学历" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="专业" name="major">
              <a-input v-model:value="worker.major" placeholder="请输入专业" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[16,16]">
          <a-col :span="12">
            <a-form-item label="毕业院校" name="graduatedFrom">
              <a-input v-model:value="worker.graduatedFrom" placeholder="请输入毕业院校" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="合同描述" name="contractPeriod">
              <a-input v-model:value="worker.contractPeriod" placeholder="请输入描述(如：一年、两年等)" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[16,16]">
          <a-col :span="12">
            <a-form-item label="入职时间" name="joinDate">
              <a-date-picker v-model:value="worker.joinDate" placeholder="请选择入职时间" style="width: 100%" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="到期时间" name="joinDate">
              <a-date-picker v-model:value="worker.contractExpiryDate" placeholder="请选择合同到期时间" style="width: 100%" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[16,16]">
          <a-col :span="12">
            <a-form-item label="联系人" name="joinDate">
              <a-input v-model:value="worker.emergencyContactName" placeholder="请输入紧急联系人姓名" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="电话" name="joinDate">
              <a-input v-model:value="worker.emergencyContactPhoneNumber" placeholder="请输入紧急联系人电话" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[16,16]">
          <a-col :span="12">
            <a-form-item label="工号" name="account">
              <a-input v-model:value="worker.account" placeholder="请输入工号(可以做登录账号使用)" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="账户状态" name="isActive">
              <a-radio-group v-model:value="worker.isActive">
                <a-radio :value="0">正常</a-radio>
                <a-radio :value="1">禁用</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[16,16]">
          <a-col :span="12">
            <a-form-item label="用户名" name="name">
              <a-input v-model:value="worker.name" placeholder="请输入用户名" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="手机号码" name="phoneNumber">
              <a-input v-model:value="worker.phoneNumber" placeholder="请输入手机号码" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[16,16]">
          <a-col :span="12">
            <a-form-item label="邮箱" name="email">
              <a-input v-model:value="worker.email" placeholder="请输入电子邮箱" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
          </a-col>
        </a-row>
      </a-form>
    </a-modal>


    <a-modal
        title="员工详情"
        v-model:open="workerInfoOpen"
        width="960px"
        @ok="() => workerInfoOpen = false"
        @cancel="() => workerInfoOpen = false"
    >
      <a-descriptions bordered>
        <a-descriptions-item label="头像">
          <div style="display: flex;align-items: center;flex-direction: column;gap: 6px">
            <a-image
                :width="62"
                v-if="!workerInfo.profilePicture && workerInfo.sex == 0"
                :src="boy"
            />
            <a-image
                :width="62"
                v-else-if="!workerInfo.profilePicture && workerInfo.sex == 1"
                :src="girl"
            />
            <a-image
                :width="62"
                v-else
                :src=" proxy.PicPrefixUrl + workerInfo.profilePicture"
            />
            <span style="opacity: 0.6;font-weight: bolder">{{ workerInfo.name }}</span>
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="账号状态" >
          <a-badge status="processing" text="正常" v-if="workerInfo.isActive == 0" />
          <a-badge status="error" text="禁用" v-if="workerInfo.isActive == 1" />
        </a-descriptions-item>
        <a-descriptions-item label="电子邮箱" >
          {{ workerInfo.email }}
        </a-descriptions-item>
        <a-descriptions-item label="姓名" :span="1">{{ workerInfo.realName }}</a-descriptions-item>
        <a-descriptions-item label="性别" :span="0.5">
          <a-tag color="#f0a1a8" v-if="workerInfo.sex == 1">女</a-tag>
          <a-tag color="#108ee9" v-if="workerInfo.sex == 0">男</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="身份证" :span="1.5">{{ workerInfo.idCard }}</a-descriptions-item>
        <a-descriptions-item label="联系电话" >
          {{ workerInfo.phoneNumber ? workerInfo.phoneNumber : '' }}
        </a-descriptions-item>
        <a-descriptions-item label="紧急联系人姓名">
          {{ workerInfo.emergencyContactName ? workerInfo.emergencyContactName : '' }}
        </a-descriptions-item>
        <a-descriptions-item label="紧急联系人电话">
          {{ workerInfo.emergencyContactPhoneNumber ? workerInfo.emergencyContactPhoneNumber : '' }}
        </a-descriptions-item>
        <a-descriptions-item label="毕业院校">{{ workerInfo.graduatedFrom }}</a-descriptions-item>
        <a-descriptions-item label="学历">{{ workerInfo.education }}</a-descriptions-item>
        <a-descriptions-item label="专业">{{ workerInfo.major }}</a-descriptions-item>
        <a-descriptions-item label="入职时间" :span="1">
          {{ dayjs(workerInfo.joinDate).format('YYYY-MM-DD') }}
        </a-descriptions-item>
        <a-descriptions-item label="合同结束" :span="1">
          {{dayjs(workerInfo.contractExpiryDate).format('YYYY-MM-DD')}}
        </a-descriptions-item>
        <a-descriptions-item label="合同描述" :span="1">
          {{ workerInfo.contractPeriod }}
        </a-descriptions-item>
        <a-descriptions-item label="部门" >
          {{ workerInfo.dept ? workerInfo.dept.name : '' }}
        </a-descriptions-item>
        <a-descriptions-item label="岗位">
          {{ workerInfo.post ? workerInfo.post.name : '' }}
        </a-descriptions-item>
        <a-descriptions-item label="工号">
          {{ workerInfo.account }}
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </a-row>
</template>

<script setup lang="ts">

    import { h, onMounted, ref , getCurrentInstance } from 'vue'
    import useDept from "@/hooks/useDept";
    import useWorker from "@/hooks/useWorker"
    import type { User } from "@/interface/User";
    const { basePoint , windowHeight , elementToTopHight } = DynamicHeight();
    import {
      PlusOutlined, QuestionCircleOutlined,
      ReloadOutlined,
      SearchOutlined
    } from '@ant-design/icons-vue';
    import DynamicHeight from "@/utils/DynamicHeight";
    import dayjs from "dayjs";

    import boy from "@/assets/img/boy.png";
    import girl from "@/assets/img/girl.png"





    const {
      selectDept , columns , handleResizeColumn , resetQuery ,
      query , tableData , pageChange  , searchBox , total , list ,
      operatorStore , operator , worker ,  submit , cancel ,
      workerInfo , workerInfoOpen , workerInfoEvent  ,
      post , filterPost , remove , rules , formRef
    }  = useWorker();


    onMounted(() => {
        getTreeDept();
    });

    let { proxy } = getCurrentInstance() as any;

    const { treeDept  , getTreeDept  } = useDept();


    let deptWord = ref('');




</script>

<style scoped lang="scss">
    .avatar {
      width: 52px;
      height: 52px;
      border-radius: 50%;
    }
    .operationItem {
      margin-left: 6px !important;
    }
    .divider {
      margin: 0 !important;
    }
    .page {
      height: 100%;
      .left {
        height: 100%;
      }
      .right {
        height: 100%;
      }
      .functionBox {
        margin: 18px 0 12px 0;
        display: flex;
        justify-content: space-between;
      }
      .pagination {
        margin: 8px 0;
        display: flex;
        justify-content: end;
      }
    }
</style>


